<!--  -->
<template>
  <div>
    <swiper :options="swiperOption" ref="mySwiper">
    <!-- slides -->
    <swiper-slide v-for="(item, index) in swiperImg" :key="index">
      <img :src="item.imgUrl">
    </swiper-slide>
    <!-- Optional controls -->
    <div class="swiper-pagination"  slot="pagination"></div>
  </swiper>
  </div>
</template>

<script>

import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
  props:[
    'swiperImg',
  ],
  data(){
    return{
      swiperOption: {
	    	pagination: {
	            el: '.swiper-pagination'
	        }
	    }
    }
  },
  components: {
    swiper,
    swiperSlide
  },
}

</script>
<style scoped>
  .swiper-container{
    position: relative;
    height: 2.66666rem;
  }
  .swiper-slide img{
	width:100%;
  height: 100%;
}
 .swiper-pagination   >>> .swiper-pagination-bullet-active {
	background: #fff ;
  font-size: 0.2133333333rem;

}
</style>